<template>
    <div id="page_box">
        <el-pagination
            v-model:current-page="currentPage3"
            v-model:page-size="pageSize3"
            :small="small"
            :disabled="disabled"
            :background="background"
            layout="prev, pager, next, jumper"
            :total="1000"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
        <div>哈哈哈</div>
    </div>
</template>

<script>
import { ref,onMounted } from 'vue'
import elementResizeDetectorMaker from 'element-resize-detector';
export default {
    name: "PaginationCom",
    setup(){
        const currentPage3 = ref(1)
        const pageSize3 = ref(100)
        const small = ref(false)
        const background = ref(true)
        const disabled = ref(false)
        const handleSizeChange = (val) => {
            console.log(`${val} items per page`)
        }
        const handleCurrentChange = (val) => {
            console.log(`current page: ${val}`)
        }
        const erd = elementResizeDetectorMaker();
        const getRem = (dom,pwidth, prem) => {
            // var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
            var oWidth = 500
            dom.style.fontSize = (pwidth * prem) / oWidth  + '%';
        }
        onMounted(() => {
            const element = document.getElementById('page_box');
            erd.listenTo(element, function(element) {
                console.log('元素的大小发生了变化');
                // 处理元素大小变化的逻辑
                let width = parseInt(window.getComputedStyle(element).width.replace('px',''))
                console.log(width,'==width')
                getRem(element,width,100)
            });
        })


        return {
            currentPage3,
            small,
            background,
            disabled,
            pageSize3,
            handleSizeChange,
            handleCurrentChange
        }
    }
}
</script>

<style scoped>
#page_box{
    width: 100%;
    height: 50px;
}
</style>